<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: solid 2px black;
            margin: 0% auto;
        }

        #d1 {
            height: 300px;
            width: 300px;
            background-color: brown;
        }

        #d2 {
            height: 250px;
            width: 250px;
            background-color: green;
        }

        #d3 {
            height: 200px;
            width: 200px;
            background-color: rgb(255, 0, 242);
        }

        #d4 {
            height: 150px;
            width: 150px;
            background-color: yellow;
        }

        #d5 {
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>
    <script>
        window.onload = function () {
            function $(id) {
                return document.getElementById(id)
            }
            // add.ElementListener(该方法有三个参数，第三个参数为布尔值，默认值为false代表事件冒泡，true代表事件捕获)
            // 阻止事件冒泡：event.stopPropagation（）***

                $('d1').addEventListener('click', function () {
                    console.log('北');

                }, false)
            $('d2').addEventListener('click', function () {
                console.log('京');

            }, false)
            $('d3').addEventListener('click', function (x) {
                console.log('欢');
                x.stopPropagation()//事件对象.stopPropagation()在该位置阻止事件冒泡

            }, false)
            $('d4').addEventListener('click', function () {
                console.log('迎');

            }, false)
            $('d5').addEventListener('click', function () {
                console.log('你');

            }, false)
        }
    </script>
</head>

<body>
    <div id="d1">北
        <div id="d2">京
            <div id="d3">欢
                <div id="d4">迎
                    <div id="d5">你</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>